<template>
  <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
    v-loading="isLoading">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.supUnityName" prop="supUnityId">
          <superviseUnitySelect v-model="formInline.supUnityId" clearable placeholder="输入监管单位名称自动查询"
            :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'supUnityId')" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="授权项目" prop="projectId">
          <projectopsSelect v-model="formInline.projectId" clearable placeholder="输入项目名称自动查询" :style="{ width: '100%' }"
            @blur="formValidateField(ruleFormRef, 'projectId')" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="授权权限" prop="roleNames">
          <getroleSelect v-model="formInline.roleNames" clearable :isitem="1" multiple placeholder="请选择项目角色权限"
            :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'roleNames')" />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import projectopsSelect from "@/components/select/projectopsSelect/projectopsSelect.vue";
import getroleSelect from "@/components/select/getroleSelect/getroleSelect.vue";
import superviseUnitySelect from "@/components/select/superviseUnitySelect/superviseUnitySelect.vue";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
import type { infoType } from "@/api/manage/regulatory-authorities/regulatory-authorities/index";
import { formValidateField } from '@/utils/functions'
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
};

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false
});

const formRules = reactive(<FormRules>{
  roleNames: [{ required: true, message: '请选择项目角色权限', trigger: "blur" }],
  projectId: [{ required: true, message: '请选择项目', trigger: "blur" }],
  supUnityId: [{ required: true, message: prompt?.supUnityId, trigger: "blur" }],
  // projectName: [
  //   { required: true, message: prompt?.projectName, trigger: "blur" }
  // ],
  // city: [{ required: true, message: prompt?.city, trigger: "blur" }],
  // contactName: [
  //   { required: true, message: prompt?.contactName, trigger: "blur" }
  // ],
  // contactPhone: [
  //   { required: true, message: prompt?.contactPhone, trigger: "blur" }
  // ],
  // updatedAt: [{ required: true, message: prompt?.updatedAt, trigger: "blur" }]
});
const ruleFormRef = ref();
//    const newFormInline = ref(props.formInline as any);
//
//
//    watch(()=>props.formInline,()=>{
//    	newFormInline.value = props.formInline
//    },{
//    	deep:true,
//    	immediate:true
//    })
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
